<template>
    <div id="app1">
    <div class="container-fluid container-med2">
        <div class="row row-1">
            <h2>管理班级页面</h2>
            <el-table :data="tableData2" style="width: 100%;">
			</el-table-column>
            <el-table-column label="专业名称" header-align="center">
			    <template scope="scope">
					<span>{{ scope.row.profession }}</span>
				</template>
			</el-table-column>
            <el-table-column label="姓名" header-align="center">
				<template scope="scope">
					<span>{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column label="学号" header-align="center">
				<template scope="scope">
					<span>{{ scope.row.number }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作"  header-align="center">
				<template scope="scope">
					<el-button type="danger" size="small" @click="Delete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

        <el-col :span="8" class="toolbar">
            <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            >
            <el-button  slot="trigger"  type="primary">导入EXECLE表</el-button>
            </el-upload>
			
			<el-button  type="primary" @click="back">返回</el-button>
			</el-pagination>
		</el-col>
               
        </div>
    </div>
    </div>
</template>


<script>

    export default{
        data(){
            return{
/*                fileList: [{name: '', url: ''},],
                arr:[0,1,2,3]*/
                tableData2:[{
                profession: '网新',
                name: '罗得很',
                number: '1440624200',
                },
                {
                profession: '动画',
                name: '黄智博',
                number: '1440624202',
                },
                {
                profession: '树莓',
                name: '库里',
                number: '1440624230',
                },
                {
                profession: '树莓',
                name: '库里',
                number: '1440624230',
                },                {
                profession: '树莓',
                name: '库里',
                number: '1440624230',
                },                {
                profession: '树莓',
                name: '库里',
                number: '1440624230',
                },
                ]
            }
        },
        methods:{
/*            deleteAll(){
                this.arr.forEarch(function(item){
                    console.log(item);
                    tableData2.splice(item,1);
                }) 
            },*/
            Delete(){
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                    });
                    this.tableData2.shift();
                    console.log(this.tableData2);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已删除'
                    });
                });
            },
		back() {

            this.$confirm('是否返回?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                });
                this.$router.go(-1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已返回'
                });
            });

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
        },

    }
</script>
<style scoped>
    .toolbar{
        margin-top:5px;
        
        margin-left:35%;
    }
    .upload-demo{
        
        float:left;
     }
    .row-1 {
        padding-top: 10px;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 50px;
    }
    .container-med2{
        -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
        box-shadow:1px px 15px rgba(144, 144, 144, 1);
    }


</style>